<!-- 主页面 -->
<template>
  <div class="pages">
    <aside ref="aside"
      @touchstart.self='resetAside'>
      <div class="wrapper"
        ref="backAisde">
        <div class="userinfo wcom">
          <div class="phone">
            <img :src="uaserInfo.avatarUrl"
              alt="">
          </div>
          <div class="pet">
            {{uaserInfo.nickname}}<span>(时音)</span>
          </div>
        </div>
        <div class="features wcom">
          <h2>音乐服务</h2>
          <ul>
            <li>
              <i class="iconfont icon-icon--"></i>
              <span>听歌识曲</span>
            </li>
            <li>
              <i class="iconfont icon-piao"></i>
              <span>云村有票</span>
            </li>
            <li>
              <i class="iconfont icon-shouye"></i>
              <span>商城</span>
            </li>
            <li>
              <i class="iconfont icon-youxi"></i>
              <span>游戏专区</span>
            </li>
            <li>
              <i class="iconfont icon-cailing"></i>
              <span>口袋彩铃</span>
            </li>
          </ul>
        </div>
        <div class="features wcom">
          <h2>其它</h2>
          <ul>
            <li>
              <i class="iconfont icon-yifu"></i>
              <span>个性装扮</span>
            </li>
            <li>
              <i class="iconfont icon-icon-test"></i>
              <span>定时关闭</span>
            </li>
            <li>
              <i class="iconfont icon-richscan_icon"></i>
              <span>扫一扫</span>
            </li>
            <li>
              <i class="iconfont icon-icon-test1"></i>
              <span>边听边存</span>
            </li>
            <li>
              <i class="iconfont icon-guanyu"></i>
              <span>关于</span>
            </li>
          </ul>
        </div>
      </div>
    </aside>
    <div class="wrapper">
      <!-- 头部导航控件 -->
      <div :class="headerBg">
        <div class="unfold">
          <i @touchstart='unfoldAside'
            class="iconfont icon-caidan"></i>
        </div>
        <div class="tabr">
          <span @touchstart="changeCurrent(items.id)"
            :class="items.isCurrent?'active':''"
            v-for="items in tabrList"
            :key="items.id">{{items.value}}</span>
        </div>
        <div class="search">
          <i class="iconfont icon-sousuo"></i>
        </div>
      </div>
      <!-- 底部播放控件 -->
      <div class="btnPlay">
        <div class="lf">
          <img src="../../assets/image/bg2.png"
            alt="">
          <div class="musicInfo">
            <h3>红山果</h3>
            <p>谭维维</p>
          </div>
        </div>
        <div class="ri">
          <div @touchstart="palymusic"
            :class="palyIcon?'stop':'play'"></div>
          <i class="iconfont icon-zhankai"></i>
        </div>
      </div>
      <van-swipe class="my-swipe"
        ref="swiper"
        @change="onChangeSwipe"
        :autoplay="0"
        :loop="false"
        :stop-propagation="isbubbling"
        :show-indicators="false"
        indicator-color="white">
        <van-swipe-item>
          <Me />
        </van-swipe-item>
        <van-swipe-item>
          <Discover />
        </van-swipe-item>
        <van-swipe-item>
          <Hamlet />
        </van-swipe-item>
        <van-swipe-item>
          <Video />
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Me from './children/Me'
import Discover from './children/Discover'
import Hamlet from './children/Hamlet'
import Video from './children/Video'
export default {
  data () {
    return {
      sideBarShow: false,
      active: 0,
      tabrList: [
        {
          id: 1,
          value: '我的',
          isCurrent: true
        },
        {
          id: 2,
          value: '发现',
          isCurrent: false
        },
        {
          id: 3,
          value: '云村',
          isCurrent: false
        },
        {
          id: 4,
          value: '视频',
          isCurrent: false
        }
      ],
      timer: -1,
      palyIcon: false,
      isbubbling: false,
      headerBg: ['headerTabr', { headerBgactive: false }]
    }
  },
  mounted () {
    this.sideMune()
    this.$refs.backAisde.addEventListener('touchstart', this.backTouchstart)
    window.addEventListener('scroll', (e) => {
      if (window.pageYOffset >= 65) {
        this.headerBg[1].headerBgactive = true
      } else {
        this.headerBg[1].headerBgactive = false
      }
    })
  },
  methods: {
    showPopup () {
      this.sideBarShow = true
    },
    asideShow () {
      // eslint-disable-next-line no-undef
      mui('.mui-off-canvas-wrap').offCanvas('show')
    },
    changeCurrent (id) {
      this.tabrList.forEach((item, i) => {
        if (id === i + 1) {
          item.isCurrent = true
          this.$refs.swiper.swipeTo(i)
        } else {
          item.isCurrent = false
        }
      })
    },
    sideMune () {
      this.$el.addEventListener('touchstart', this.sideTouchstart)
    },
    sideTouchstart (e) {
      this.startX = e.touches[0].clientX
      if (this.startX <= 15) {
        this.$el.addEventListener('touchmove', this.sideTouchmove)
        this.$el.addEventListener('touchend', this.sideTouchend)
      }
    },
    sideTouchmove (e) {
      const differ = this.startX - e.touches[0].clientX
      this.startX = e.touches[0].clientX
      this.$refs.aside.style.left = this.$refs.aside.offsetLeft - differ + 'px'
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.$el.removeEventListener('touchmove', this.sideTouchmove)
      }, 100)
    },
    sideTouchend (e) {
      this.clearTransiton()
      if (this.$refs.aside.offsetLeft >= -230) {
        this.$refs.aside.style.left = '0px'
      } else {
        this.$refs.aside.style.left = '-100%'
      }
      this.$el.removeEventListener('touchend', this.sideTouchend)
    },
    resetAside () {
      this.clearTransiton()
      this.$refs.aside.style.left = '-100%'
    },
    backTouchstart (e) {
      this.startX = e.touches[0].clientX
      this.$refs.backAisde.addEventListener('touchmove', this.backTouchMove)
      this.$refs.backAisde.addEventListener('touchend', this.backTouchend)
    },
    backTouchMove (e) {
      const differ = this.startX - e.touches[0].clientX
      this.startX = e.touches[0].clientX
      if (differ > 0) {
        this.$refs.aside.style.left = this.$refs.aside.offsetLeft - differ + 'px'
      }
    },
    backTouchend () {
      this.clearTransiton()
      if (this.$refs.aside.offsetLeft >= -110) {
        this.$refs.aside.style.left = '0px'
      } else {
        this.$refs.aside.style.left = '-100%'
      }
    },
    unfoldAside () {
      this.clearTransiton()
      this.$refs.aside.style.left = '0px'
    },
    clearTransiton () {
      this.$refs.aside.style.transition = 'all 0.4s'
      this.$refs.aside.addEventListener('transitionend', () => {
        this.$refs.aside.style.transition = 'all 0s'
      })
    },
    // 播放切换
    palymusic () {
      this.palyIcon = !this.palyIcon
    },
    onChangeSwipe (v) {
      if (v === 0) {
        this.isbubbling = false
      } else {
        this.isbubbling = true
      }
      this.changeCurrent(v + 1)
    }
  },
  computed: {
    ...mapState(['uaserInfo'])
  },
  components: {
    Me,
    Discover,
    Hamlet,
    Video
  }
}
</script>
<style lang='less' scoped>
/* @import url(); 引入css类 */
.wcom {
  background-color: #fff;
  margin: 0rem auto;
  width: 90%;
}
.userinfo {
  height: 6.25rem;
  margin-top: 1.875rem;
  background-image: linear-gradient(45deg, #8baaaa 0%, #ae8b9c 100%);
  display: flex;
  border-radius: 15px;
  overflow: hidden;
  .phone {
    flex: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    img {
      width: 100%;
      border-radius: 50%;
    }
  }
  .pet {
    flex: 6;
    line-height: 6.25rem;
    text-align: center;
    font-size: 24px;
    span {
      font-size: 14px;
      vertical-align: middle;
    }
  }
}
.features {
  margin-top: 30px;
  height: 300px;
  border-radius: 8px;
  h2 {
    font-size: 14px;
    font-weight: 400;
    padding: 10px;
    color: #666;
    border-bottom: 1px solid var(--themeColor);
  }
  ul {
    li {
      padding: 15px 10px;
      display: flex;
      align-items: center;
      font-size: 16px;
      i {
        padding: 0px 10px;
        font-size: 22px;
      }
    }
  }
}
.pages {
  width: 100%;
  height: 100%;
}

.wrapper {
  width: 100%;
  height: 100%;
  background: #f3f4ef;
  .headerTabr {
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 60px;
    position: fixed;
    z-index: 666;
    background: #f3f4ef;
    top: 0;
    left: 0;
    align-items: center;
    .unfold {
      flex: 1.5;
      padding-left: 15px;
      .icon-caidan {
        font-size: 30px;
        color: #2e2f2a;
      }
    }
    .tabr {
      display: flex;
      flex: 6;
      align-items: center;
      span {
        flex: 1;
        color: #81827d;
      }
      .active {
        color: #000;
        font-size: 20px;
        font-weight: 800;
      }
    }
    .search {
      flex: 1.5;
      text-align: right;
      .icon-sousuo {
        font-size: 25px;
        padding-right: 15px;
      }
    }
  }
  .headerBgactive {
    background: #ffff;
  }
}
// ----------------------
aside {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0px;
  left: -100%;
  z-index: 999;
  .wrapper {
    width: 85%;
    height: 100%;
    background: #f7f7f7;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    overflow: hidden;
  }
}
.btnPlay {
  width: 100vw;
  height: 70px;
  background: #fff;
  border-top: 1px solid #dddddd;
  position: fixed;
  z-index: 55;
  bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .lf {
    display: flex;
    flex-direction: row;
    padding-left: 10px;
    img {
      height: 60px;
      width: 60px;
      border-radius: 50%;
    }
    .musicInfo {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      padding-left: 5px;
      h3 {
        color: #363636;
      }
      p {
        color: #7e7e7e;
      }
    }
  }
  .ri {
    display: flex;
    align-items: center;
    .play {
      width: 60px;
      height: 60px;
      background: url("../../assets/image/66.png") -77px -16px;
      background-size: 470px;
    }
    .stop {
      width: 60px;
      height: 60px;
      background: url("../../assets/image/66.png") -132px -16px;
      background-size: 470px;
    }
    .icon-zhankai {
      font-size: 30px;
      margin: 0px 10px;
    }
  }
}
.van-swipe {
  width: 100%;
  height: 100vh;
  padding-top: 60px;
  padding-bottom: 71px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
